<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>友情链接管理</title>
    <link rel="stylesheet" href="../../css/elementUI.css" />
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    创建一个卡片组件，用于包裹表单和表格-->
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="网站名称">
                <el-input v-model="searchForm.name" placeholder="网站名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <!-- 表单项，用于选择状态-->
                <el-select v-model="searchForm.state" placeholder="状态">
                    <el-option label="所有" value=""></el-option>
                    <el-option label="正常" :value="0"></el-option>
                    <el-option label="已删除" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <!--定义查询方法-->
                <el-button type="primary" @click="queryLinks">查询</el-button>
                <el-button  size="medium"   @click="handleAdd">添加</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格数据 -->
        <!--        显示links数组中的数据-->
        <el-table
                :data="links"
                border
                show-header
                highlight-current-row
                align="center"
                style="width: 100%; margin-top:40px; min-height:340px">
            <el-table-column label="ID" width="80">
                <template slot-scope="scope">
                    <span>{{ scope.row.lid }}</span>
                </template>
            </el-table-column>
            <el-table-column label="网站名称" width="120">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="链接地址">
                <template slot-scope="scope">
                    <!--创建一个可点击的链接-->
                    <el-link :href="scope.row.link" target="_blank" type="primary">{{ scope.row.link }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="添加时间" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.startTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束时间" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.endTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'">
                        {{ scope.row.state === 0 ? '正常' : '已删除' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑友情链接" :visible.sync="editDialog" @close="cancelEdit">
        <el-form :model="editForm" ref="editForm" :rules="rules">
            <el-form-item label="网站名称" prop="name">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>
            <el-form-item label="链接地址" prop="link">
                <el-input v-model="editForm.link"></el-input>
            </el-form-item>
            <el-form-item label="结束时间">
                <!--日期选择器-->
                <el-date-picker
                        v-model="editForm.endTime"
                        type="datetime"
                        placeholder="选择结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="editForm.state">
                    <el-option label="正常" :value="0"></el-option>
                    <el-option label="已删除" :value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEdit">取 消</el-button>
            <el-button type="primary" @click="submitEdit">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 添加对话框 -->
    <el-dialog title="添加友情链接" :visible.sync="addDialog" @close="cancelAdd">
        <el-form :model="addForm" ref="addForm" :rules="rules">
            <el-form-item label="网站名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="链接地址" prop="link">
                <el-input v-model="addForm.link"></el-input>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker
                        v-model="addForm.endTime"
                        type="datetime"
                        placeholder="选择结束时间">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelAdd">取 消</el-button>
            <el-button type="primary" @click="submitAdd">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script src="../../js/vue.js"></script>
<script src="../../js/elementUI.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            searchForm:{
                name:'',
                state:''
            },
            links:[],
            editDialog: false,
            addDialog: false,
            editForm: {
                lid: '',
                name: '',
                link: '',
                endTime: '',
                state: 0
            },
            addForm: {
                name: '',
                link: '',
                endTime: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入网站名称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                link: [
                    { required: true, message: '请输入链接地址', trigger: 'blur' },
                    { pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w .-]*)*\/?$/, message: '请输入正确的URL格式', trigger: 'blur' }
                ]
            }
        },
        created(){
            this.queryLinks();
        },
        methods: {
            // 根据搜索条件查询链接列表
            queryLinks(){
                axios.get('../../Link/list', {
                    params: this.searchForm
                }).then(response => {
                    this.links = response.data;
                });
            },

            // 编辑
            handleEdit(index, row) {
                this.editForm = JSON.parse(JSON.stringify(row));
                this.editDialog = true;
            },

            // 添加
            handleAdd() {
                this.addForm = {
                    name: '',
                    link: '',
                    endTime: ''
                };
                this.addDialog = true;
            },

            // 删除
            handleDelete(index, row) {
                this.$confirm('确认删除该链接吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.delete('../../Link/delete/' + row.lid).then(response => {
                        if(response.data) {
                            this.$message.success('删除成功');
                            this.queryLinks();
                        }
                    });
                });
            },

            // 取消编辑
            cancelEdit() {
                this.editDialog = false;
                this.editForm = {};
                this.queryLinks();
            },

            // 提交编辑
            submitEdit() {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        axios.put('../../Link/update', this.editForm).then(response => {
                            if(response.data) {
                                this.$message.success('修改成功');
                                this.editDialog = false;
                                this.queryLinks();
                            }
                        });
                    }
                });
            },

            // 取消添加
            cancelAdd() {
                this.addDialog = false;
                this.addForm = {};
                this.queryLinks();
            },

            // 提交添加
            submitAdd() {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        axios.post('../../Link/add', this.addForm).then(response => {
                            if(response.data) {
                                this.$message.success('添加成功');
                                this.addDialog = false;
                                this.queryLinks();
                            }
                        });
                    }
                });
            }
        }
    });
</script>
</body>
</html>